<template>
  <div class="device-control">
    <h3>警报</h3>
    <div class="control-group">
      <div class="control-item">
        <label>警报灯</label>
        <div class="toggle-switch">
          <input 
            type="checkbox" 
            id="led-toggle" 
            v-model="ledStatus" 
            @change="handleToggle"
            disabled
          />
          <label for="led-toggle" class="toggle-label"></label>
          <span class="toggle-status">{{ ledStatus ? '警报中' : '正常' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useSmartHomeStore } from '../stores/smartHome'

const store = useSmartHomeStore()
const ledStatus = ref(store.ledStatus)

// 计算舒适度状态
const comfortStatus = computed(() => {
  const { temperature, humidity } = store
  if (temperature > 30 || humidity > 90) return 'uncomfortable'
  if (temperature < 18 || humidity < 30) return 'uncomfortable'
  return 'comfortable'
})

// 监听舒适度变化
watch(comfortStatus, (newStatus) => {
  const shouldAlarm = newStatus === 'uncomfortable'
  
  // 只有当状态需要改变时才调用toggle
  if (shouldAlarm && !ledStatus.value) {
    store.toggleLed()
  } else if (!shouldAlarm && ledStatus.value) {
    store.toggleLed()
  }
}, { immediate: true }) // 立即执行一次以初始化状态

// 同步store中的LED状态
watch(() => store.ledStatus, (newVal) => {
  ledStatus.value = newVal
})

// 保留手动切换功能（可选）
const handleToggle = () => {
  // 如果需要完全自动控制，可以移除这个方法
  // 或者添加权限控制，只允许管理员手动操作
  store.toggleLed()
}
</script>

<style scoped>
/* 警报灯开启时的特殊样式 */
input[type="checkbox"]:checked + .toggle-label {
  background: #f44336; /* 红色表示警报 */
  animation: blink 0.8s infinite alternate; /* 添加闪烁效果 */
}

/* 警报灯闪烁动画 */
@keyframes blink {
  from { 
    opacity: 1;
    box-shadow: 0 0 5px #f44336;
  }
  to { 
    opacity: 0.7;
    box-shadow: 0 0 20px #f44336;
  }
}

/* 警报状态文字样式 */
.toggle-status {
  font-weight: 500;
}
.toggle-switch input:checked ~ .toggle-status {
  color: #f44336;
  font-weight: bold;
}

/* 其他样式保持不变 */
.device-control {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.device-control:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.device-control h3 {
  margin-top: 0;
  color: #333;
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 20px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.control-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-item label {
  font-size: 1rem;
  color: #555;
}

.toggle-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-status {
  font-size: 0.9rem;
  color: #666;
  min-width: 40px;
  transition: all 0.3s;
  text-align: center;
}

input[type="checkbox"] {
  display: none;
}

.toggle-label {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 26px;
  background: #ccc;
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.3s;
}

.toggle-label:after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}

input[type="checkbox"]:checked + .toggle-label:after {
  transform: translateX(26px);
}
</style>